import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { HashRouter } from "react-router-dom";
import { Toaster } from 'sonner';
import App from "./App.tsx";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <HashRouter>
      <App />
      <Toaster 
        position="top-right"
        toastOptions={{
          className: 'font-sans',
          duration: 3000,
          style: {
            background: 'var(--toast-bg, #fff)',
            color: 'var(--toast-color, #374151)',
            border: '1px solid var(--toast-border, #e5e7eb)',
            borderRadius: '12px',
            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
            fontSize: '14px',
            fontWeight: '500',
            marginTop: '50px',
          },
        }}
        icons={{
          success: <i className="fa-solid fa-circle-check text-green-500 mr-2" />,
          error: <i className="fa-solid fa-circle-xmark text-red-500 mr-2" />,
          warning: <i className="fa-solid fa-triangle-exclamation text-amber-500 mr-2" />,
          info: <i className="fa-solid fa-circle-info text-blue-500 mr-2" />,
          loading: <i className="fa-solid fa-spinner animate-spin text-gray-500 mr-2" />,
        }}
      />
    </HashRouter>
  </StrictMode>
);
